<template>
	<view class="page">
		<pageheader :setting="settingdata"></pageheader>
		<view class="block">
			<view @click="add_show_popup">
				<u-icon name="plus-circle-fill" size="34"></u-icon>
				<text class="text">新增分类</text>
			</view>
		</view>
	<!-- 	<view class="block">
			<view @click="show_add">
				<u-icon name="plus-circle-fill" size="34"></u-icon>
				<text class="text">选择分类</text>
			</view>
		</view> -->

		<view class="block line" v-for="(item,index) in sort_list" :key="index" @click="setparent(item)">
			<view class="flex_align">
				<u-icon name="trash" size="34" @click="del_sort(item)"></u-icon>
				<text style="margin-left: 10rpx;">{{item.name}}</text>
			</view>
			<view @click.stop="showedit(item)">编辑</view>
		</view>

		<u-popup v-model="show_sort" mode="center" border-radius="14" @close="quxiao_add">
			<view class="popup_add">
				<view class="popup_title">{{is_edit?'编辑分类':'新增分类'}}</view>
				<view class="form">
					<view class='form-line flex'>
						<view class='left'>
							<text class="ml15">分类名称</text>
						</view>
						<input type="text" name="consignee" v-model="sortname" placeholder='请输入规格名称' maxlength='20'
							@blur="changename"></input>
					</view>
					<view class='form-line flex'>
						<view class='left'>
							<text class="ml15">排序</text>
						</view>
						<input type="text" name="consignee" v-model="sortnum" placeholder='请输入排序值' maxlength='20'
							@blur="changenum"></input>
					</view>
				</view>
				<view class="flex_align popup_foot">
					<view @click="quxiao_add">取消</view>
					<view @click="addtitle" v-if="!is_edit">确定</view>
					<view @click="edit_popup" v-if="is_edit">完成</view>
				</view>
			</view>
		</u-popup>


		<u-popup v-model="show_add_open" mode="bottom" border-radius="14" @close="quxiao_add" class="popup_box">
			<view class="popup_title">选择分类名称</view>
			<u-checkbox-group v-model="radiovalue" @change="groupChange" :wrap="true">
				<scroll-view scroll-y="true" style="height: 600rpx;" bindscrolltolower="lower">

					<block v-for="(item, index) in radiovalue1" :key="index">
						<u-checkbox v-model="item.checked" :name="index">{{item.name}}</u-checkbox>
					</block>

				</scroll-view>
			</u-checkbox-group>
			<view class="flex_align popup_foot">
				<view class="popup_sub green" @click="quren_add">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var _this;
	import App from '@/App.vue';
	export default {
		data() {
			return {
				settingdata: {
					name: '店铺分类',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "shopSort"
				},
				sort_list: [],
				show_sort: false,
				sortname: '',
				sortnum: '',
				is_edit: false,
				sort_id: 0,

				show_add_open: false,
				radiovalue: [],
				radiovalue1: [],
				spec_attr: [],
				isParentSet: false
			};
		},
		onLoad(options) {
			this.isParentSet = options.isParentSet
			_this = this
			this.getlist()
		},
		onShow() {
			// this.getcate()
		},
		methods: {
			setparent(item) {
				if (this.isParentSet) {
					wx.setStorageSync("shopcate", {
						id: item.id,
						name: item.name,
						weigh: item.weigh
					})
					wx.navigateBack({
						delta: 1
					})
				}
			},
			add_show_popup() {
				_this.show_sort = true
				console.log(_this.show_sort)
				_this.sortname = ''
				_this.sortnum = ''
			},
			quxiao_add() {
				_this.show_sort = false
			},
			changename: function(event) {
				_this.sortname = event.target.value

			},
			changenum: function(event) {
				_this.sortnum = event.target.value
			},

			show_add() {
				_this.show_add_open = true
			},
			groupChange(e) {
				console.log(e, 111)
				_this.radiovalue = e
			},

			// 添加
			addtitle() {
				_this.click_shake(() => {
					_this.$api.post('addshopcate', {
						add_type: 1,
						name: _this.sortname,
						weigh: _this.sortnum,
						cate_ids: ''
					}).then((res) => {
						uni.showToast({
							icon: "none",
							title: "添加成功"
						})
						_this.sortname = ''
						_this.sortnum = ''
						_this.show_sort = false
						_this.getlist()
					});
				})
			},

			getcate() {
				_this.$api.get("myshopscate", {}).then(data => {
					debugger
					for (let i of data) {
						i.checked = false
					}
					this.radiovalue1 = data
					console.log(this.radiovalue1)
				});
			},
			quren_add() {
				let str = ''
				this.radiovalue1.forEach((item, index) => {
					if (item.checked) {
						str += (item.id + ',')
						console.log(item.id)
					}
				})
				str = str.substring(0, str.length - 1)
				console.log(str)
				_this.click_shake(() => {
					_this.$api.post('addshopcate', {
						add_type: 2,
						name: '',
						weigh: '',
						cate_ids: str
					}).then((res) => {
						uni.showToast({
							icon: "none",
							title: "添加成功"
						})
						_this.show_add_open = false
						_this.getlist()
					});
				})
			},
			// 获取列表
			getlist() {
				_this.$api.get('getshopcatelist').then((res) => {
					_this.sort_list = res
				});
			},
			showedit(e) {
				_this.is_edit = true
				_this.show_sort = true
				_this.sortname = e.name
				_this.sortnum = e.weigh
				_this.sort_id = e.id
			},
			edit_popup() {
				_this.click_shake(() => {
					_this.$api.post('editshopcate', {
						name: _this.sortname,
						weigh: _this.sortnum,
						id: _this.sort_id
					}).then((res) => {
						uni.showToast({
							icon: "none",
							title: "修改成功"
						})
						setTimeout(function() {
							_this.is_edit = false
						}, 500)
						_this.sortname = ''
						_this.sortnum = ''
						_this.sort_id = ''
						_this.show_sort = false
						_this.getlist()
					});
				})
			},
			del_sort(e) {
				uni.showModal({
					title: '删除',
					content: '是否删除此分类',
					success: function(res) {
						if (res.confirm) {
							_this.$api.post('delshopcate', {
								id: e.id
							}).then((res) => {
								uni.showToast({
									icon: "none",
									title: "删除成功"
								})
								_this.getlist()
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #F5F5F5;
		min-height: 100vh;
	}

	.block {
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 30rpx;
		margin-top: 15rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;

		.text {
			margin-left: 15rpx;
			font-size: 32rpx;
		}
	}

	.popup_add {

		.popup_title {
			text-align: center;
			font-size: 36rpx;
			padding-top: 48rpx;
		}

		.form {
			background-color: #FFF;
			margin: 30rpx 30rpx 0;
			padding: 0rpx 25rpx;

			.form-line {
				border-bottom: none;
				border-top: 2rpx solid #eee;
			}

			.flex {
				display: flex;
				line-height: 109rpx;
				height: 110rpx;
				justify-content: space-between;
				align-items: center;
			}

			.left {
				width: 32%;
				font-size: 30rpx;
				font-weight: 500;
			}
		}

		.popup_foot {
			margin: 0 auto;
			text-align: center;
			border-top: 2rpx solid #eee;
			width: 100%;

			view {
				width: 49%;
				padding: 30rpx 0 30rpx;
				border-right: 2rpx solid #eee;
			}

			view:last-child {
				border-right: none;
				// color: #2790FA;
			}
		}

	}


	.popup_box {
		/deep/.u-checkbox {
			flex-direction: row-reverse;
			padding: 0px 40rpx;
			justify-content: space-between;
		}

		.popup_title {
			text-align: center;
			font-size: 36rpx;
			padding-top: 48rpx;
			margin-bottom: 80rpx;
		}

		.popup_foot {
			width: 80%;
			margin: 40rpx auto 40rpx;
			justify-content: center;
		}

		.popup_sub {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background-color: #DCDCDC;
			border-radius: 88rpx;
			font-size: 36rpx;
		}

		.green {
			background-image: linear-gradient(to right, #62BB91, #4EABB6);
			color: #FFFFFF;
		}
	}
</style>
